<template>
	<view class="dashboard-container">
		<!-- 动态网格背景 -->
		<view class="grid-background"></view>

		<!-- 扫描线效果 -->
		<view class="scan-line"></view>

		<!-- 顶部标题栏 -->
		<view class="tech-header">
			<view class="header-left">
				<view class="title-wrapper">
					<text class="glow-text">数据</text>
					<text class="title-text">看板</text>
				</view>
				<view class="subtitle">实时数据监控中心</view>
			</view>
			<view class="header-right">
				<view class="time-display">
					<view class="time-label">最后更新</view>
					<view class="time-value">{{updateTime}}</view>
				</view>
			</view>
		</view>

		<!-- 核心数据卡片 -->
		<view class="core-stats">
			<el-row :gutter="20">
				<el-col :span="6">
					<view class="data-card card-users">
						<view class="card-border"></view>
						<view class="card-header">
							<view class="icon-box">
								<text class="icon">👥</text>
							</view>
							<view class="card-label">总用户数</view>
						</view>
						<view class="card-body">
							<view class="data-number">{{statistics.totalUsers || 0}}</view>
							<view class="data-unit">用户</view>
						</view>
						<view class="card-glow"></view>
					</view>
				</el-col>
				<el-col :span="6">
					<view class="data-card card-courses">
						<view class="card-border"></view>
						<view class="card-header">
							<view class="icon-box">
								<text class="icon">📖</text>
							</view>
							<view class="card-label">总课件数</view>
						</view>
						<view class="card-body">
							<view class="data-number">{{statistics.totalPPTs || 0}}</view>
							<view class="data-unit">课件</view>
						</view>
						<view class="card-glow"></view>
					</view>
				</el-col>
				<el-col :span="6">
					<view class="data-card card-revenue">
						<view class="card-border"></view>
						<view class="card-header">
							<view class="icon-box">
								<text class="icon">💰</text>
							</view>
							<view class="card-label">累计收益</view>
						</view>
						<view class="card-body">
							<view class="data-number">¥{{statistics.totalRevenue || 0}}</view>
							<view class="data-unit">收益</view>
						</view>
						<view class="card-glow"></view>
					</view>
				</el-col>
				<el-col :span="6">
					<view class="data-card card-downloads">
						<view class="card-border"></view>
						<view class="card-header">
							<view class="icon-box">
								<text class="icon">📥</text>
							</view>
							<view class="card-label">总下载量</view>
						</view>
						<view class="card-body">
							<view class="data-number">{{statistics.totalDownloads || 0}}</view>
							<view class="data-unit">次</view>
						</view>
						<view class="card-glow"></view>
					</view>
				</el-col>
			</el-row>
		</view>

		<!-- 趋势分析区域 -->
		<view class="trend-section">
			<!-- 第一行图表 -->
			<el-row :gutter="20">
				<el-col :span="12">
					<view class="trend-card">
						<view class="trend-header">
							<view class="header-line"></view>
							<view class="header-title">
								<text class="title-icon">📈</text>
								<text class="title-text">用户注册趋势</text>
							</view>
							<view class="header-tag">最近7天</view>
						</view>
						<view class="trend-body">
							<qiun-data-charts
								type="line"
								:chartData="userRegisterChartData"
								:opts="chartOpts"
								:canvas2d="true"
							/>
						</view>
					</view>
				</el-col>
				<el-col :span="12">
					<view class="trend-card">
						<view class="trend-header">
							<view class="header-line"></view>
							<view class="header-title">
								<text class="title-icon">🔐</text>
								<text class="title-text">用户登录趋势</text>
							</view>
							<view class="header-tag">最近7天</view>
						</view>
						<view class="trend-body">
							<qiun-data-charts
								type="line"
								:chartData="userLoginChartData"
								:opts="loginChartOpts"
								:canvas2d="true"
							/>
						</view>
					</view>
				</el-col>
			</el-row>

			<!-- 第二行图表 -->
			<el-row :gutter="20" style="margin-top: 20px;">
				<el-col :span="12">
					<view class="trend-card">
						<view class="trend-header">
							<view class="header-line"></view>
							<view class="header-title">
								<text class="title-icon">📥</text>
								<text class="title-text">课件下载趋势</text>
							</view>
							<view class="header-tag">最近7天</view>
						</view>
						<view class="trend-body">
							<qiun-data-charts
								type="line"
								:chartData="downloadChartData"
								:opts="downloadChartOpts"
								:canvas2d="true"
							/>
						</view>
					</view>
				</el-col>
				<el-col :span="12">
					<view class="trend-card">
						<view class="trend-header">
							<view class="header-line"></view>
							<view class="header-title">
								<text class="title-icon">💰</text>
								<text class="title-text">收益趋势</text>
							</view>
							<view class="header-tag">最近7天</view>
						</view>
						<view class="trend-body">
							<qiun-data-charts
								type="column"
								:chartData="revenueChartData"
								:opts="revenueChartOpts"
								:canvas2d="true"
							/>
						</view>
					</view>
				</el-col>
			</el-row>

			<!-- 热门课件排行 -->
			<el-row :gutter="20" style="margin-top: 20px;">
				<el-col :span="24">
					<view class="rank-card">
						<view class="rank-header">
							<view class="header-line"></view>
							<view class="header-title">
								<text class="title-icon">🔥</text>
								<text class="title-text">热门课件排行榜</text>
							</view>
							<view class="header-tag">前5名</view>
						</view>
						<view class="rank-body">
							<view class="rank-list">
								<view
									v-for="(item, index) in topPPTs"
									:key="index"
									class="rank-item"
									:class="'rank-' + (index + 1)">
									<view class="rank-number">
										<text v-if="index === 0" class="medal gold">🥇</text>
										<text v-else-if="index === 1" class="medal silver">🥈</text>
										<text v-else-if="index === 2" class="medal bronze">🥉</text>
										<text v-else class="number">{{index + 1}}</text>
									</view>
									<view class="rank-info">
										<view class="course-title">{{item.title || '未知课件'}}</view>
										<view class="course-desc">{{item.desc || '暂无描述'}}</view>
									</view>
									<view class="rank-count">
										<view class="count-number">{{item.downloadCount}}</view>
										<view class="count-label">下载次数</view>
									</view>
									<view class="rank-glow"></view>
								</view>
							</view>
						</view>
					</view>
				</el-col>
			</el-row>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			updateTime: '',
			statistics: {
				totalUsers: 0,
				totalPPTs: 0,
				totalRevenue: 0,
				totalDownloads: 0
			},
			userRegisterChartData: {},
			userLoginChartData: {},
			downloadChartData: {},
			revenueChartData: {},
			topPPTs: [],
			chartOpts: {
				color: ["#00d4ff"],
				padding: [15, 15, 0, 15],
				enableScroll: false,
				legend: {
					show: false
				},
				xAxis: {
					disableGrid: false,
					gridColor: "rgba(0, 212, 255, 0.1)",
					fontColor: "#00d4ff",
					fontSize: 10
				},
				yAxis: {
					data: [{
						min: 0,
						gridColor: "rgba(0, 212, 255, 0.1)",
						fontColor: "#00d4ff",
						fontSize: 10
					}]
				},
				extra: {
					line: {
						type: "curve",
						width: 3,
						activeType: "hollow",
						linearType: "custom",
						linearOpacity: 0.3
					}
				}
			},
			loginChartOpts: {
				color: ["#00ff88"],
				padding: [15, 15, 0, 15],
				enableScroll: false,
				legend: {
					show: false
				},
				xAxis: {
					disableGrid: false,
					gridColor: "rgba(0, 255, 136, 0.1)",
					fontColor: "#00ff88",
					fontSize: 10
				},
				yAxis: {
					data: [{
						min: 0,
						gridColor: "rgba(0, 255, 136, 0.1)",
						fontColor: "#00ff88",
						fontSize: 10
					}]
				},
				extra: {
					line: {
						type: "curve",
						width: 3,
						activeType: "hollow",
						linearType: "custom",
						linearOpacity: 0.3
					}
				}
			},
			downloadChartOpts: {
				color: ["#ff00ff"],
				padding: [15, 15, 0, 15],
				enableScroll: false,
				legend: {
					show: false
				},
				xAxis: {
					disableGrid: false,
					gridColor: "rgba(255, 0, 255, 0.1)",
					fontColor: "#ff00ff",
					fontSize: 10
				},
				yAxis: {
					data: [{
						min: 0,
						gridColor: "rgba(255, 0, 255, 0.1)",
						fontColor: "#ff00ff",
						fontSize: 10
					}]
				},
				extra: {
					line: {
						type: "curve",
						width: 3,
						activeType: "hollow",
						linearType: "custom",
						linearOpacity: 0.3
					}
				}
			},
			revenueChartOpts: {
				color: ["#ffd700"],
				padding: [15, 15, 0, 15],
				enableScroll: false,
				legend: {
					show: false
				},
				xAxis: {
					disableGrid: false,
					gridColor: "rgba(255, 215, 0, 0.1)",
					fontColor: "#ffd700",
					fontSize: 10
				},
				yAxis: {
					data: [{
						min: 0,
						gridColor: "rgba(255, 215, 0, 0.1)",
						fontColor: "#ffd700",
						fontSize: 10
					}]
				},
				extra: {
					column: {
						type: "group",
						width: 30,
						activeBgColor: "#ffd700",
						activeBgOpacity: 0.3,
						linearType: "custom",
						linearOpacity: 0.5
					}
				}
			}
		};
	},
	onLoad() {
		this.loadAllData();
	},
	methods: {
		// 加载所有数据
		async loadAllData() {
			this.updateTime = this.getCurrentTime();
			await Promise.all([
				this.loadStatistics(),
				this.loadUserRegisterTrend(),
				this.loadUserLoginTrend(),
				this.loadDownloadTrend(),
				this.loadRevenueTrend(),
				this.loadTopPPTs()
			]);
		},

		// 获取基础统计数据
		async loadStatistics() {
			try {
				const res = await this.common.rightApi("admin/dashboard/statistics", {});
				if (res.code === 1 && res.data) {
					this.statistics = res.data;
				}
			} catch (error) {
				console.error('获取统计数据失败:', error);
			}
		},

		// 获取用户注册趋势
		async loadUserRegisterTrend() {
			try {
				const res = await this.common.rightApi("admin/dashboard/userRegisterTrend", {});
				if (res.code === 1 && res.data) {
					this.userRegisterChartData = {
						categories: this.formatDates(res.data.dates),
						series: [{
							name: "注册人数",
							data: res.data.values
						}]
					};
				}
			} catch (error) {
				console.error('获取用户注册趋势失败:', error);
			}
		},

		// 获取用户登录趋势
		async loadUserLoginTrend() {
			try {
				const res = await this.common.rightApi("admin/dashboard/userLoginTrend", {});
				if (res.code === 1 && res.data) {
					this.userLoginChartData = {
						categories: this.formatDates(res.data.dates),
						series: [{
							name: "登录人数",
							data: res.data.values
						}]
					};
				}
			} catch (error) {
				console.error('获取用户登录趋势失败:', error);
			}
		},

		// 获取下载趋势
		async loadDownloadTrend() {
			try {
				const res = await this.common.rightApi("admin/dashboard/downloadTrend", {});
				if (res.code === 1 && res.data) {
					this.downloadChartData = {
						categories: this.formatDates(res.data.dates),
						series: [{
							name: "下载次数",
							data: res.data.values
						}]
					};
				}
			} catch (error) {
				console.error('获取下载趋势失败:', error);
			}
		},

		// 获取收益趋势
		async loadRevenueTrend() {
			try {
				const res = await this.common.rightApi("admin/dashboard/revenueTrend", {});
				if (res.code === 1 && res.data) {
					this.revenueChartData = {
						categories: this.formatDates(res.data.dates),
						series: [{
							name: "收益金额",
							data: res.data.values
						}]
					};
				}
			} catch (error) {
				console.error('获取收益趋势失败:', error);
			}
		},

		// 获取热门课件TOP5
		async loadTopPPTs() {
			try {
				const res = await this.common.rightApi("admin/dashboard/topPPTs", {});
				if (res.code === 1 && res.data) {
					this.topPPTs = res.data;
				}
			} catch (error) {
				console.error('获取热门课件失败:', error);
			}
		},

		// 格式化日期显示（只显示月-日）
		formatDates(dates) {
			return dates.map(date => {
				const d = new Date(date);
				return `${d.getMonth() + 1}/${d.getDate()}`;
			});
		},

		// 获取当前时间
		getCurrentTime() {
			const now = new Date();
			const year = now.getFullYear();
			const month = String(now.getMonth() + 1).padStart(2, '0');
			const day = String(now.getDate()).padStart(2, '0');
			const hours = String(now.getHours()).padStart(2, '0');
			const minutes = String(now.getMinutes()).padStart(2, '0');
			const seconds = String(now.getSeconds()).padStart(2, '0');
			return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
		}
	}
};
</script>

<style lang="scss" scoped>
/* ==================== 主容器 ==================== */
.dashboard-container {
	width: 100%;
	min-height: 100vh;
	background: #0a0e27;
	position: relative;
	overflow-y: auto;
	padding: 20px;
	box-sizing: border-box;
}

/* ==================== 动态网格背景 ==================== */
.grid-background {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image:
		linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px);
	background-size: 50px 50px;
	pointer-events: none;
	z-index: 0;
}

/* ==================== 扫描线效果 ==================== */
.scan-line {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, transparent, #00d4ff, transparent);
	animation: scan 3s linear infinite;
	z-index: 0;
	opacity: 0.5;
}

@keyframes scan {
	0% { top: 0; }
	100% { top: 100%; }
}

/* ==================== 顶部标题栏 ==================== */
.tech-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30px;
	padding: 25px 30px;
	background: rgba(15, 20, 40, 0.8);
	border: 1px solid rgba(0, 212, 255, 0.3);
	border-radius: 8px;
	backdrop-filter: blur(10px);
	position: relative;
	z-index: 1;
	box-shadow: 0 0 20px rgba(0, 212, 255, 0.1);

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 2px;
		background: linear-gradient(90deg, transparent, #00d4ff, transparent);
	}
}

.header-left {
	.title-wrapper {
		display: flex;
		align-items: baseline;
		gap: 10px;
		margin-bottom: 8px;
	}

	.glow-text {
		font-size: 32px;
		font-weight: 900;
		letter-spacing: 3px;
		color: #00d4ff;
		text-shadow: 0 0 20px rgba(0, 212, 255, 0.8),
					 0 0 40px rgba(0, 212, 255, 0.4);
		animation: glow 2s ease-in-out infinite alternate;
	}

	.title-text {
		font-size: 32px;
		font-weight: 700;
		letter-spacing: 2px;
		color: #fff;
	}

	.subtitle {
		font-size: 13px;
		color: #00d4ff;
		letter-spacing: 2px;
		text-transform: uppercase;
	}
}

@keyframes glow {
	from {
		text-shadow: 0 0 10px rgba(0, 212, 255, 0.5),
					 0 0 20px rgba(0, 212, 255, 0.3);
	}
	to {
		text-shadow: 0 0 20px rgba(0, 212, 255, 1),
					 0 0 40px rgba(0, 212, 255, 0.6);
	}
}

.header-right {
	.time-display {
		text-align: right;

		.time-label {
			font-size: 10px;
			color: #00d4ff;
			letter-spacing: 1px;
			margin-bottom: 5px;
		}

		.time-value {
			font-size: 14px;
			color: #fff;
			font-family: 'Courier New', monospace;
		}
	}
}

/* ==================== 核心数据卡片 ==================== */
.core-stats {
	margin-bottom: 30px;
	position: relative;
	z-index: 1;
}

.data-card {
	position: relative;
	padding: 25px;
	background: rgba(15, 20, 40, 0.6);
	border-radius: 12px;
	overflow: hidden;
	transition: all 0.3s ease;
	cursor: pointer;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		border-radius: 12px;
		padding: 2px;
		background: linear-gradient(135deg, transparent, rgba(0, 212, 255, 0.5), transparent);
		-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
		-webkit-mask-composite: xor;
		mask-composite: exclude;
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	&:hover {
		transform: translateY(-5px);

		&::before {
			opacity: 1;
		}

		.card-glow {
			opacity: 0.3;
		}
	}

	.card-border {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 1px solid rgba(0, 212, 255, 0.2);
		border-radius: 12px;
		pointer-events: none;
	}

	.card-header {
		display: flex;
		align-items: center;
		margin-bottom: 15px;

		.icon-box {
			width: 50px;
			height: 50px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 15px;
			border-radius: 8px;
			background: rgba(0, 212, 255, 0.1);
			border: 1px solid rgba(0, 212, 255, 0.3);

			.icon {
				font-size: 28px;
			}
		}

		.card-label {
			font-size: 11px;
			letter-spacing: 2px;
			color: #00d4ff;
			font-weight: 600;
		}
	}

	.card-body {
		display: flex;
		align-items: baseline;
		gap: 8px;

		.data-number {
			font-size: 36px;
			font-weight: 700;
			color: #fff;
			font-family: 'Arial', sans-serif;
		}

		.data-unit {
			font-size: 14px;
			color: rgba(255, 255, 255, 0.5);
		}
	}

	.card-glow {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 150px;
		height: 150px;
		border-radius: 50%;
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	&.card-users .card-glow {
		background: radial-gradient(circle, rgba(0, 212, 255, 0.4), transparent);
	}

	&.card-courses .card-glow {
		background: radial-gradient(circle, rgba(0, 255, 136, 0.4), transparent);
	}

	&.card-revenue .card-glow {
		background: radial-gradient(circle, rgba(255, 215, 0, 0.4), transparent);
	}

	&.card-downloads .card-glow {
		background: radial-gradient(circle, rgba(255, 0, 255, 0.4), transparent);
	}
}

/* ==================== 趋势分析区域 ==================== */
.trend-section {
	position: relative;
	z-index: 1;
}

.trend-card {
	background: rgba(15, 20, 40, 0.6);
	border: 1px solid rgba(0, 212, 255, 0.2);
	border-radius: 12px;
	padding: 20px;
	margin-bottom: 20px;
	backdrop-filter: blur(10px);

	.trend-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20px;
		padding-bottom: 15px;
		border-bottom: 1px solid rgba(0, 212, 255, 0.1);
		position: relative;

		.header-line {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 60px;
			height: 2px;
			background: linear-gradient(90deg, #00d4ff, transparent);
		}

		.header-title {
			display: flex;
			align-items: center;
			gap: 10px;

			.title-icon {
				font-size: 20px;
			}

			.title-text {
				font-size: 16px;
				font-weight: 600;
				color: #fff;
			}
		}

		.header-tag {
			font-size: 10px;
			letter-spacing: 1px;
			color: #00d4ff;
			padding: 4px 12px;
			border: 1px solid rgba(0, 212, 255, 0.3);
			border-radius: 12px;
			background: rgba(0, 212, 255, 0.1);
		}
	}

	.trend-body {
		height: 300px;
	}
}

/* ==================== 排行榜卡片 ==================== */
.rank-card {
	background: rgba(15, 20, 40, 0.6);
	border: 1px solid rgba(0, 212, 255, 0.2);
	border-radius: 12px;
	padding: 20px;
	backdrop-filter: blur(10px);

	.rank-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 25px;
		padding-bottom: 15px;
		border-bottom: 1px solid rgba(0, 212, 255, 0.1);
		position: relative;

		.header-line {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 80px;
			height: 2px;
			background: linear-gradient(90deg, #00d4ff, transparent);
		}

		.header-title {
			display: flex;
			align-items: center;
			gap: 10px;

			.title-icon {
				font-size: 22px;
			}

			.title-text {
				font-size: 18px;
				font-weight: 600;
				color: #fff;
			}
		}

		.header-tag {
			font-size: 11px;
			letter-spacing: 1px;
			color: #ff6b6b;
			padding: 5px 15px;
			border: 1px solid rgba(255, 107, 107, 0.3);
			border-radius: 12px;
			background: rgba(255, 107, 107, 0.1);
		}
	}

	.rank-body {
		.rank-list {
			display: flex;
			flex-direction: column;
			gap: 15px;
		}

		.rank-item {
			display: flex;
			align-items: center;
			gap: 20px;
			padding: 20px;
			background: rgba(25, 30, 50, 0.5);
			border: 1px solid rgba(0, 212, 255, 0.15);
			border-radius: 10px;
			position: relative;
			overflow: hidden;
			transition: all 0.3s ease;

			&:hover {
				background: rgba(25, 30, 50, 0.8);
				border-color: rgba(0, 212, 255, 0.4);
				transform: translateX(5px);

				.rank-glow {
					opacity: 0.2;
				}
			}

			&.rank-1 {
				border-left: 3px solid #ffd700;
			}

			&.rank-2 {
				border-left: 3px solid #c0c0c0;
			}

			&.rank-3 {
				border-left: 3px solid #cd7f32;
			}

			.rank-number {
				min-width: 50px;
				height: 50px;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24px;
				font-weight: 700;
				color: #00d4ff;
				background: rgba(0, 212, 255, 0.1);
				border: 1px solid rgba(0, 212, 255, 0.3);
				border-radius: 8px;

				.medal {
					font-size: 32px;
				}

				.number {
					color: rgba(255, 255, 255, 0.6);
				}
			}

			.rank-info {
				flex: 1;

				.course-title {
					font-size: 16px;
					font-weight: 600;
					color: #fff;
					margin-bottom: 8px;
				}

				.course-desc {
					font-size: 13px;
					color: rgba(255, 255, 255, 0.5);
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}

			.rank-count {
				text-align: right;
				min-width: 120px;

				.count-number {
					font-size: 28px;
					font-weight: 700;
					color: #00d4ff;
					text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
				}

				.count-label {
					font-size: 10px;
					color: rgba(0, 212, 255, 0.7);
					letter-spacing: 1px;
					margin-top: 5px;
				}
			}

			.rank-glow {
				position: absolute;
				right: -50px;
				top: -50px;
				width: 150px;
				height: 150px;
				background: radial-gradient(circle, rgba(0, 212, 255, 0.3), transparent);
				opacity: 0;
				transition: opacity 0.3s ease;
			}
		}
	}
}
</style>
